<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="${ctx}/css/font.css">
    <link rel="stylesheet" href="${ctx}/css/xadmin.css">
    <link rel="stylesheet" href="${ctx}/lib/layui/css/layui.css">

    <script type="text/javascript" src="${ctx}/lib/layui/layui.js"></script>
    <!-- 导入jquery插件 -->
    <script type="text/javascript" src="${ctx}/js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="${ctx}/js/jquery-migrate-1.2.1.js"></script>
    
    <script type="text/javascript">
        layui.use(['form'], function(){
            var layer = layui.layer;
            $(function () {
                $("#deptForm").submit(function(){
                    var content = $("#content");
                    var msg = "";
                    if ($.trim(content.val()) == ""){
                        msg = "请输入你的留言内容！！！";
                        content.focus();
                    }
                    if (msg != ""){
                        layer.alert(JSON.stringify(msg), {
                            title: '警告'
                        });
                        return false;
                    }else{
                        return true;
                        $("#deptForm").submit();
                    }

                });
            });

        });
    </script>
    <script type="text/javascript">
        setTimeout(function(){document.getElementById("message").style.display="none";},5000);
    </script>
</head>
<body oncontextmenu="self.event.returnValue=false" onselectstart="return false">
<div class="x-body layui-anim layui-anim-up">

    <fieldset class="layui-elem-field">
        <legend>留言板</legend>
    <form class="layui-form" action="${ctx}/postMessage" id="deptForm" method="POST">
    <div class="layui-form-item layui-form-text">
        <div class="layui-input-block" style="margin-left: 34px;margin-top: 4px;">
            <textarea name="content" id="content" placeholder="请输入内容" class="layui-textarea" style="width:860px;height:200px;"></textarea>
        </div>
    </div>
    <div id="message" style="color: red;margin-left:84px;margin-top: 10px">${message}</div>
    <div class="layui-form-item">
        <div class="layui-input-block" style="margin-left: 700px;">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="add">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    </form>
    </fieldset>

    <%--留言提交完了之后，从数据库刷新，进行下面的显示。--%>

    <div class="layui-col-md12 layadmin-homepage-list-imgtxt message-content">


        <c:forEach items="${requestScope.list}" var="list" varStatus="stat">
        <div class="media-body">
            <p class="message-text" style="height: 20px;"></p>
            <a href="javascript:;" class="media-left" style="float: left;">
                <img src="${list.avatar}" class="layui-nav-img">
            </a>
            <div class="pad-btm">
                <p class="fontColor"><a href="javascript:;">${list.person}</a></p>
                <p class="min-font">
              <span class="layui-breadcrumb" lay-separator="-" style="visibility: visible;">
                <a href="javascript:;" class="layui-icon layui-icon-cellphone"></a><span lay-separator="">-</span>
                <a href="javascript:;">发布于</a><span lay-separator="">-</span>
                <a href="javascript:;">${list.creatTimeStr}</a>
              </span>
                </p>
            </div>
            <p class="message-text" style="margin-left: 40px;margin-top: 4px;">${list.content}</p>
            <p class="message-text" style="height: 20px;"></p>
        </div>
        </c:forEach>

    </div>

</div>
</body>
</html>